<template>
  <!--权限（菜单）管理页面-->
  <div>
    <div class="btnGroup">
      <a-button icon="plus-circle" @click="addPermission()">
        新增
      </a-button>
    </div>
    <a-table
      size="small"
      :bordered="true"
      :columns="columns"
      :dataSource="data"
      :rowKey="`id`"
    >
      <!--信号-->
      <template slot="icon" slot-scope="icon">
        <a-icon :type="icon"/>
      </template>
      <!--状态-->
      <template slot="state" slot-scope="state">
        <a-switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          :checked="state === 1"/>
      </template>
      <div slot="action" slot-scope="text">
        <template v-if="text.code !== 'index'">
          <a href="javascript:;" @click="updatePermission(text)"><a-icon type="edit"/> 修改</a>
        </template>
      </div>
    </a-table>
    <PermissionModalModify @refresh="queryTable" ref="modal"></PermissionModalModify>
  </div>
</template>

<script>
import api from './system'
// 初始值
import PermissionModalModify from './modal/PermissionModalModify'

const columns = [
  { title: '名称', align: 'left', dataIndex: 'name' },
  { title: '唯一编码', align: 'left', width: '16%', dataIndex: 'code' },
  { title: '图标', align: 'center', width: '8%', dataIndex: 'icon', scopedSlots: { customRender: 'icon' } },
  { title: '层级', align: 'center', width: '6%', dataIndex: 'level' },
  { title: '排序', align: 'center', width: '6%', dataIndex: 'sort' },
  { title: '状态', align: 'center', width: '10%', dataIndex: 'state', scopedSlots: { customRender: 'state' } },
  { title: '操作', align: 'center', width: '10%', key: 'action', scopedSlots: { customRender: 'action' } }
]

// 权限（菜单）管理页面
export default {
  name: 'PermissionPage',
  components: { PermissionModalModify },
  data () {
    return {
      columns,
      data: []
    }
  },
  mounted () {
    this.queryTable()
  },
  methods: {
    // 请求后台-获取权限列表
    queryTable () {
      this.axios.post(api.permission.getAllMenuTree)
        .then((response) => {
          this.data = response.data
        })
        .catch((error) => {
          console.log('【权限管理数据查询】获取数据请求异常了', error)
        })
    },
    // 新增
    addPermission () {
      this.$refs.modal.showModal()
    },
    // 修改
    updatePermission (text) {
      this.$refs.modal.showModal(text)
    }
  }
}
</script>
